<template>
	<view class="coupon-container">
		<uv-toast ref="toast"></uv-toast>
		<PLoader :loading="loading"></PLoader>
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ active: curStatus === tab.value }"
				@click="switchTab(tab.value)">
				{{ tab.label }}
			</view>
		</view>

		<!-- 券列表 -->
		<scroll-view scroll-y class="coupon-list">
			<view v-for="coupon in coupons" :key="coupon.id" class="coupon-card" @click="navigateToDetail(coupon)">
				<view class="coupon-left">
					<view class="coupon-type">早餐券</view>
					<view class="validity">
						<text>{{ coupon.createTime }}</text>
					</view>
					<view class="code">券码：{{ coupon.voucherCode }}</view>
				</view>

				<view class="coupon-right">
					<view class="status-tag" :class="{ used: coupon.status === 1 }">
						{{ coupon.status === 0 ? '未使用' : '已使用' }}
					</view>
					<view class="time-limit">0:00-10:00可用</view>
					<view class="verify-btn" v-if="coupon.status === 0">
						验券
						<text class="iconfont icon-scan"></text>
					</view>
				</view>

				<view class="glass-effect"></view>
			</view>
		</scroll-view>


		<!-- 使用说明 -->
		<view class="info-card">
			<view class="title">使用说明</view>
			<view class="info-item">• 观看完整视频可获得1张早餐券</view>
			<view class="info-item">• 早餐券24小时内有效</view>
			<view class="info-item">• 仅限0:00-10:00使用</view>
			<view class="info-item">• 早餐券全国通用</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						label: '未使用',
						value: 0
					},
					{
						label: '已使用',
						value: 1
					}
				],
				loading: false,
				page: 1,
				size: 10,
				curStatus: 0, // 0未使用 1已使用
				hasMore: true, // 添加是否有更多数据的标志
				coupons: [], // 将初始数据置空，通过接口获取
			}
		},
		watch: {
			curStatus() {
				this.resetAndFetch(); // 修改状态切换处理
			}
		},
		methods: {
			// 显示提示信息
			showToast(msg, type = 'default', duration = 1000) {
				this.$refs.toast.show({
					message: msg,
					type: type,
					duration: duration,
				})
			},
			switchTab(index) {
				this.curStatus = index;
			},
			// 重置并获取数据
			resetAndFetch() {
				this.page = 1;
				this.hasMore = true;
				this.coupons = [];
				this.fetchUserCoupons();
			},
			async fetchUserCoupons() {
				if (this.loading || !this.hasMore) {
					return;
				}
				try {
					this.loading = true;
					const data = await this.$http.get(
						`/breakfast/coupon/list?page=${this.page}&size=${this.size}&status=${this.curStatus}`);

					if (data) {
						// 处理分页数据
						if (this.page === 1) {
							this.coupons = data.items;
						} else {
							this.coupons = [...this.coupons, ...data.items];
						}

						// 判断是否还有更多数据
						this.hasMore = data.count === this.size;
						this.page += 1;

						this.coupons = this.coupons.map(item => {
							item.qrCode = `https://quickwashmaster.website/lyf/code=${item.voucherCode}`
							return item;
						});
					}
				} catch (e) {
					this.showToast('加载失败');
				} finally {
					this.loading = false;
				}
			},
			navigateToDetail(coupon) {
				if (coupon.status !== 0) {
					this.showToast('已使用的券无法验证');
					return;
				}

				uni.navigateTo({
					url: `/subpkg/breakfast_coupon_qrc_code/breakfast_coupon_qrc_code?id=${coupon.id}&code=${coupon.voucherCode}`
				});
			}
		},

		onReachBottom() {
			this.fetchUserCoupons();
		},

		async onShow() {
			await this.fetchUserCoupons();
		},

		async onPullDownRefresh() {
			await this.resetAndFetch();
			uni.stopPullDownRefresh();
		},
	}
</script>

<style lang="scss" scoped>
	@import 'coupon.scss';
</style>